<template>
  <div class="plcomt">
    <div class="mupl">
      <span class="iconfont icon-zuoyoujiantou" @click="$router.go(-1)"
        >歌曲评论</span
      >
    </div>

    <div class="muplbox">
      <ul>
        <li v-for="(item,index) in sonlist" :key="index">
          <div
            class="plimg"
            :style="'background-image: url(' + item.user.avatarUrl + ')'"
          ></div>
          <span class="userid"
            >{{ item.user.nickname }}
            <span class="iconfont icon-dianzan" @click="getCommentLikeFun(item.commentId)">
                <span class="likenum">{{item.likedCount}}</span>
            </span>
          </span>
          <span class="pltime">{{ item.timeStr }}</span>
          <span class="pltext">{{ item.content }}</span>
        </li>
      </ul>
      <div class="sontext">
        <input type="text" placeholder="请输入需要发表的评论" v-model="text" />
        <button @click="getCommentFun">发送</button>
      </div>
    </div>
  </div>
</template>
<script>
import { getCommentMusic,getCommentLike,getComment } from "../../api/base";
import {Toast} from 'vant';
export default {
  // props: ["playtype"],
  data() {
    return {
      text: "",
      sonlist:[],
      type1:"",
    };
  },
  methods: {
    //歌曲评论
    getCommentMusicFun() {
      getCommentMusic({ id:this.$route.query.id }).then((data) => {
        console.log(data.comments);
        this.sonlist = data.comments;
      });
    },
    //评论点赞
    getCommentLikeFun(id){
      getCommentLike({id:this.$route.query.id,cid:id,type:0,t:1}).then((data)=>{
            console.log("成功点赞",data)
            Toast("成功点赞")
        })
    },
    //发送评论
    getCommentFun(){
        getComment({t:1,type:0,id: this.$route.query.id,content:this.text}).then((data)=>{
            console.log("已发送",data);
            Toast("发送成功")
            // this.text.push()
        })
        this.text = ""
    },
  },
  created() {
    this.getCommentMusicFun();
    console.log(this.$route.query.type);
    this.type1 = this.$route.query.type
  },
//   watch: {
//     playerId() {
//       this.getSongUrlFun(); //歌曲url
//     //   this.getSongDetailFun(); //歌曲信息
//     //   this.getLyricFun(); //歌曲歌词
//     },
//   },
};
</script>

<style lang="less">
.plcomt{
  position: relative;
  z-index: 100000;
  background-color: white;
.mupl {
  height: 50px;
  position: relative;
  background-color: #d4473c;
  span {
    font-size: 18px;
    position: absolute;
    left: 12px;
    top: 12px;
    color: #fff;
  }
}

.muplbox {
  ul {
    // width: 100%;
    li {
      // border: 1px solid black;
      margin: 10px 10px;
      // position: relative;
      // width: 100%;
      // height: 200px;
      border-bottom: 1px solid #eaeaea;
      .plimg {
        width: 50px;
        height: 50px;
        border: 1px solid black;
        border-radius: 50%;
        background-size: cover;
      }
      .userid {
        position: absolute;
        margin-left: 65px;
        margin-top: -45px;
        font-size: 17px;
        .iconfont{
            margin-left: 10px;
            .likenum{
                // margin-left: 0px;
                font-size: 10px;
                color: #9a9a9a;
            }
        }
      }
      .pltime {
        position: absolute;
        margin-left: 65px;
        margin-top: -20px;
        font-size: 10px;
        color: #9a9a9a;
      }
      .pltext {
        display: block;
        // width: 100%;
        margin: 15px 40px;
        font-size: 15px;
        // background-color: #f3f3f3;
      }
    }
  }
  .sontext {
  width: 100%;
  height: 40px;
  position: fixed;
  left: 0px;
  bottom: 0px;
  background-color: white;
  border-top: 1px solid #f3f3f3;
  input {
    width: 200px;
    height: 25px;
    border-radius: 20px;
    // float: right;
    margin-left: 60px;
    margin-top: 5px;
    border: 1px solid #e0e0e0;
  }
  button{
    width: 50px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background-color: white;
    margin-left: 10px;
  }
}
}
}
</style>